<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉服荟</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <script src="./axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            background-position: center;
            width: 100%;
            height: 760px;
            background-size: cover;
            background-repeat: no-repeat;
            z-index: -1;
            background-image: url(https://pic.hanfugou.com/web/2019/8/30/15/edfd8d6a7e684902834fb9bf9cb95e64.jpeg_2000.jpg )
        }

        .main-1 {
            width: 360px;
            height: 380px;
            background-color: #fff;

        }

        div .main-1 .main-1-1 {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 22px;
            text-align: center;
            border-bottom: 1px #ddd solid;
        }


        .main-2 span {
            width: 50px;
            height: 38px;
            text-align: center;
            /* border-radius: ; */
        }

        .main-2 input {
            /* height: 20px; */
            padding: 9px;
            line-height: 20px;
            border-width: 1px;
            border-style: solid;
            border-radius: 2px;
            border: 1px #e6e6e6 solid;
        }

        .main-2 p:nth-child(1) {
            width: 280px;
            border: 1px #e6e6e6 solid;
        }

        input {
            color: #555;
            ;
            font-size: 14px;
            border: 0;
            outline: 0;
        }

        p {
            font-size: 14px;
        }

        .main-4 span:nth-child(1) {
            margin: 0 0 0 32px;

        }

        .main-4 span:nth-child(2) {
            margin: 0 0 0 20px;
        }

        .main-4 span:hover {
            color: #ff6699;
        }

        a {
            text-decoration: none;
        }

        .main-5 a button:hover {
            color: #c9c9c9;
            background-color: #fff;
        }

        ul a {
            width: 50px;
            height: 50px;
            display: inline-block;
            margin: 10px 41px 0 0;
            background: url(https://public.hanfuhui.com/Image/icon_login_thrid.png) no-repeat;
        }




        .main-6 i {
            color: white;
            font-style: normal;
            margin: 0 10px;
        }

        .food a {
            color: white;
        }

        .food a:hover {
            color: #ff6699;

        }
    </style>
</head>

<body>
    <!-- jd.com/favicon.ico》   ico图标 -->
    <header>
        <div></div>
        <div class="main" style="width:1100px ; margin: auto;">
            <img src="https://public.hanfuhui.com/Image/logo_pc.png?v=1" alt="" style=" margin: 80px auto 0;">
            <div class="main-1" style="margin: -15px 0 0 740px;">
                <p class="main-1-1">手机号注册</p>
                <div style="margin-top: 30px;">
                    <div class="main-2" style="margin: 0 0 0 38px;">
                        <p>
                            <input type="text" value="" style="border: 0;outline: 0;" placeholder="手机号">
                        </p>
                        <p> <input type="text" placeholder="验证码" style="width:110px" height="40px"><input type="text"
                                style=" margin: 15px 0 0 22px; width:110px" height="38px " value="发送验证码"
                                onclick="settime(this);"></p>
                        <p class="main-3"
                            style="width: 280px; height: 38px;  border: 1px #e6e6e6 solid; margin-top: 15px;"><input
                                type="text" placeholder="密码" style="border: 0;
                                outline: 0; "></p>
                        <p style="margin: 20px 0 0 0 ;"><input type="checkbox"> 同意<a href=""
                                style="color: #5678A0;margin: 0 0 0 6px;">用户协议</a></p>
                        <p><input type="text"
                                style="width: 260px; background-color: #ff6699; text-align: center; margin-top: 20px;"
                                value="下一步">
                        </p>

                    </div>

                </div>

            </div>
        </div>
        <div class="food" style="text-align: center; margin-top: 120px;">
            <div class="main-6">
                <a href="">关于我们</a>
                <i>|</i>
                <a href="">社区公约</a>
                <i>|</i>
                <a href="">用户协议</a>
                <i>|</i>
                <a href="">隐私政策</a>
                <i>|</i>
                <a href="">帮助中心</a>
            </div>
            <div class="main-7" style="margin-top: 15px; color: white;">
                Copyright ©2018 深圳市汉服荟网络科技有限公司 版权所有 <a href="">粤ICP备14046913号-5</a>
            </div>
        </div>

    </header>



    <script>
        let inpt = document.querySelectorAll("input");
        // let btn = document.querySelector("#button")
        var qq = false;
        inpt[0].onblur = function () {
            var zh = /^1[3|4|5|7|8][0-9]{9}$/;
            if (zh.test(this.value)) {
                //判定this.value符不符合zh
                qq = true;
                //   console.log(qq)
                //   span.innerHTML = "太对了，哥1";
            } else {
                qq = false;
                //   alert("您的格式不正确");
            }
            console.log(qq);

            var q1 = false;
            inpt[3].onblur = function () {
                var zh1 = /^.{4,10}$/;
                if (zh1.test(this.value)) {
                    //判定this.value符不符合zh
                    q1 = true;
                    //   console.log(qq)
                    //   span.innerHTML = "太对了，哥1";
                } else {
                    q1 = false;
                    //   alert("您的格式不正确");
                }
                console.log(q1);
                console.log(qq, q1)
                console.log(inpt[5])
                inpt[5].onclick = function () {
                    if (qq == true, q1 == true) {
                        // let inps = document.querySelectorAll("input");

                        let username = inpt[0].value;
                        let password = inpt[3].value;
                        let api = "http://jx.xuzhixiang.top/ap/api/reg.php";
                        axios.get(api, {
                            params: {
                                username,
                                password
                            }
                        }).then((r) => {
                            console.log(r.data);
                            if (r.data.code == 1) {
                                alert(r.data.msg);
                                location.href = "./登录.html";
                            }
                        });
                    }
                };
            };

        }



        var counts = 60;

        function settime(val) {
            if (counts == 0) {

                // alert("手机号错误")
                val.removeAttribute("disabled");
                val.value = "获取验证码";
                counts = 60;
                return false;
            } else {
                val.setAttribute("disabled", true);
                val.value = "重新发送（" + counts + "）";
                counts--;
            }
            setTimeout(function () {
                settime(val);
            }, 1000);
           


                            

        }
        var dxarr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", ];

        inpt[1].onclick =function fn2() {
            let num1 = Math.floor(Math.random() * 9);
            let num2 = Math.floor(Math.random() * 9);
            let num3 = Math.floor(Math.random() * 9);
            let num4 = Math.floor(Math.random() * 9);
            let dxran = dxarr[num1] + dxarr[num2] + dxarr[num3] + dxarr[num4];
            inpt[1].innerHTML = dxran;
            
        }
        fn2()
        console.log(fn2)
    </script>
</body>

</html>